<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height:60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="dialogVisible=true"
          >新增角色</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="list">
          <el-table-column label="序号" width="120" type="index" />
          <el-table-column label="角色名称" prop="name" width="240" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="success" @click="assignPermissions(scope.row.id)">分配权限</el-button>
              <el-button size="small" type="primary" @click="reviseSett(scope.row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delSett(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination layout="prev,pager,next" :page-size="page.pagesize" :total="total" @current-change="changePage" />
        </el-row>
      </el-card>
    </div>
    <!-- 弹出层 -->
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible=false"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="员工" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="员工描述" prop="description">
          <el-input v-model="ruleForm.description" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRuleForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配权限 -->
    <assign-permiss :show-assign-dialog="showAssignDialog" :role-id="roleId" @closure="showAssignDialog=false" />
  </div>
</template>

<script>
import assignPermiss from './component/assign-permiss.vue'
import { getRoleList, delRoleList, addRoleList, reviseRoleList, setRoleList } from '@/api/setting'
// 导入局部组件必须在scrip里面导入,在App里面导入
export default {
// 组件名称
  name: 'Setting',
  // 接收局部注册的组件
  components: {
    assignPermiss
  },
  // 组件参数接收来自父组件的数据
  props: {},
  // 组件数据
  data () {
    return {
      list: [],
      dialogVisible: false,
      showAssignDialog: false, // 分配权限弹窗
      total: 0,
      roleId: null,
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 3
      },
      pageId: null,
      // 弹窗数据
      ruleForm: {
        name: '',
        description: '',
        companyId: '',
        id: '',
        code: '',
        permIds: null
      },
      rules: {
        name: [
          { required: true, message: '请输入员工名字', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入员工描述信息', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getRoleLists()
  },
  methods: {
    async  getRoleLists () {
      const req = await getRoleList(this.page)
      // 得到的数据赋值给数组
      this.list = req.data.rows
      // console.log(req.data.total)
      this.total = req.data.total
    },
    // 下上页
    changePage (page) {
      // console.log(page)
      this.page.page = page
      this.getRoleLists()
    },
    // 删除
    delSett (id) {
      console.log(1)
      this.$confirm('确定删除该部门吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 删除接口
        await delRoleList(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        if (this.lists.length === 1) {
          this.page.page = this.page.page - 1
        }
        // 调封装接口的方法获得员工详情
        this.getRoleLists()
      }).catch(() => {

      })
    },
    // 增加 和编辑发送的请求
    editRuleForm () {
      // console.log(1)
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // console.log(111)
          // console.log(this.ruleForm)
          if (this.ruleForm.id) {
            // 修改
            await setRoleList(this.ruleForm.id, this.ruleForm)
          } else {
            // 新增
            await addRoleList(this.ruleForm)
          }

          this.getRoleLists()
          this.dialogVisible = false
          // 重置当前表单
          this.$refs.ruleForm.resetFields()
          this.ruleForm = {
            name: '',
            description: '',
            companyId: '',
            id: '',
            code: '',
            permIds: null
          }
        }
      })
    },
    // 修改获得详情
    async  reviseSett (id) {
      this.pageId = id
      const res = await reviseRoleList(id)
      this.dialogVisible = true
      this.ruleForm = res.data
      // console.log(res.data)
    },
    // 修改 setRoleList
    // 分配权限
    assignPermissions (id) {
      this.roleId = id
      this.showAssignDialog = true
    }
  }
}
</script>
<style lang='less' scoped>

</style>
